<template>
    <el-dialog
    title="添加"
    :visible.sync="AdddialogVisible"
    width="600px"
    :before-close="modalClose">
            <el-form :model="adminUser" ref="adminUser" :rules="rules" label-width="100px" class="demo-ruleForm">
              <el-form-item
                label="用户账号"
                prop="adminAccount"
                required="true"
              >
                <el-input type="text" v-model="adminUser.adminAccount" auto-complete="off" clearable></el-input>
              </el-form-item>
              <el-form-item
                label="用户密码"
                prop="adminPassword" required="true">
                <el-input type="password" v-model="adminUser.adminPassword" auto-complete="off" clearable></el-input>
              </el-form-item>
              <el-form-item
                label="确认密码"
                prop="adminRepassword" required="true">
                <el-input type="password" v-model="adminUser.adminRepassword" auto-complete="off" clearable></el-input>
              </el-form-item>
              <el-form-item
                label="用户手机号"
                prop="adminPhoneNumber" required="true">
                <el-input type="adminPhoneNumber" v-model="adminUser.adminPhoneNumber" auto-complete="off" clearable></el-input>
              </el-form-item>
              <el-form-item label="用户权限">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="用户头像"
                prop="adminHeadProtrait">
                <el-upload
                  class="upload-demo"
                  action="http://localhost:8001/upload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-success="handleSuccess"
                  v-model="adminUser.adminHeadProtrait">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="rest">重置</el-button>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="modalClose()">取 消</el-button>
        <el-button type="primary" @click="demo">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import axios from "axios"
import cookie from "js-cookie"
export default {
  data() {
    return {
      AdddialogVisible:true,
      user:{},
      adminUser:{},
      options:[],
      value:"",
      rules:{
        adminAccount:[
          { pattern: /^[0-9A-Za-z]{6,12}$/, message: '账号6位到12位' }
        ],
        adminPassword:[
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/, message: '密码6到12位,数字加字母' }
        ],
        adminRepassword:[
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/, message: '密码6到12位,数字加字母' }
        ],
        adminPhoneNumber:[
          { pattern: /^[0-9]{11}$/, message: '手机号不正确' }
        ]
      },
    }
  },


  props: ["close","init"],
  mounted () {
    var th=this;
    axios.get("http://localhost:8001/role").then((data)=>{
      th.options=data.data.records;
      console.log(th.options)
    })
    if(cookie.get("user")!=null){
      this.user=JSON.parse(cookie.get("user"));
    }
    console.log(this.AdddialogVisible)
  },
  methods: {
    handleSuccess(response,file,fileList){
      this.adminUser.adminHeadProtrait=response;
      console.log(response);
    },
    submitForm(){
      if(this.adminUser.adminPassword!=this.adminUser.adminRepassword){
        this.$message({
          showClose: true,
          message: '俩次密码不一致',
          type: 'error'
        });
        console.log(111)
        return;
      }
      this.adminUser.adminRoleId=this.value;
      this.adminUser.creatorId=1;
      this.adminUser.updateBy=1;
      this.adminUser.adminStatus=1;
      var th=this;
      console.log(this.adminUser)
      axios.post("http://localhost:8001/admin",{
        adminAccount: this.adminUser.adminAccount,
        adminHeadProtrait:this.adminUser.adminHeadProtrait,
        adminPassword: this.adminUser.adminPassword,
        adminPhoneNumber: this.adminUser.adminPhoneNumber,
        adminRoleId:this.adminUser.adminRoleId,
        adminStatus:this.adminUser.adminStatus,
        creatorId:this.adminUser.creatorId,
        updateBy:this.adminUser.updateBy
      }).then((data)=>{
        console.log(data)
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        });
        console.log(222);
       this.init();
       this.close();
      }).catch((data)=> {
        this.$message({
          showClose: true,
          message: '未知原因,请联系管理员',
          type: 'error'
        });
      });
    },
    rest(){
      this.$refs.adminUser.resetFields()
    },
    demo(){
      // this.AdddialogVisible=false;
      console.log(this.AdddialogVisible)
      this.close();
    },
    modalClose() {
      this.close();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {

    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>
